<style>
	.center {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
		/* background-size: 100% 100%; */
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	h1 {
		font-size: 30px;
		color: black;
	}
 
	.logon {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		/* position: relative;
		overflow: hidden; */
		width: 768px;
		max-width: 100%;
		min-height: 480px;
		margin-top: 20px;
		display: flex;
		background: -webkit-linear-gradient(right, #4284db, #29eac4);
	}
 
	.overlaylong {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(100%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongright {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaytitle {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
 
	.overlaytitleH2 {
		font-size: 30px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleP {
		font-size: 15px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitleright {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitle-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaytitle-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.buttongohs {
		width: 180px;
		height: 40px;
		border-radius: 50px;
		border: 1px solid #fff;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		margin-top: 40px;
	}
 
	.overlaylongH2 {
		font-size: 25px;
		color: black;
		/* width: 250px; */
	}
 
	.overlaylong-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaylong-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	input {
		background-color: #eee;
		border: none;
		padding: 12px 15px;
		margin: 10px 0;
		width: 240px;
	}
	h3{
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
	}
	.inupbutton{
		background-color: #29eac4;
		border: none;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		font-size: 15px;
		color: #fff;	
		text-align: center;
		line-height: 40px;
		margin-top: 30px;
	}
</style>
 
<template>
    <div class="center">
      <div class="logon">
        <div :class="overlaylong">
          <div class="overlaylong-Signin" v-if="disfiex == 0">
            <h2 class="overlaylongH2">Sign in</h2>
            <input type="text" v-model="loginForm.username" placeholder="用户名">
            <input type="adminpassword" v-model="loginForm.adminpassword" placeholder="密码">
            <button class="inupbutton" @click="signIn">Sign in</button>
          </div>
          <div class="overlaylong-Signup" v-if="disfiex == 1">
            <h2 class="overlaylongH2">注册账号</h2>
            <input type="text" placeholder="用户名">
            <input type="adminpassword" placeholder="密码">
            <button class="inupbutton">Sign up</button>
          </div>
        </div>
        <div :class="overlaytitle">
          <div class="overlaytitle-Signin" v-if="disfiex == 0">
            <h2 class="overlaytitleH2">你好，朋友！</h2>
            <p class="overlaytitleP">
              输入你的密码以加入我们
            </p>
            <!-- <div class="buttongohs" @click="signUp">Sign up</div> -->
          </div>
          <div class="overlaytitle-Signup" v-if="disfiex == 1">
            <h2 class="overlaytitleH2">欢迎回来！</h2>
            <p class="overlaytitleP">为了保持与我们的联系，请使用你的个人信息登录</p>
            <div class="buttongohs" @click="signIn">Sign in</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  axios.defaults.baseURL = 'http://127.0.0.1:8080';
    export default {
      data() {
        return {
          overlaylong: 'overlaylong',
          overlaytitle: 'overlaytitle',
          disfiex: 0,
      loginForm: {
        username: '',
        adminpassword: ''
      }
        }
      },
      methods: {
        signUp() {
          this.overlaylong = "overlaylongleft"
          this.overlaytitle = "overlaytitleright"
          setTimeout(() => {
            this.disfiex = 1
          }, 200)
        },
        async signIn() {  
  const { username, adminpassword } = this.loginForm;  
  try {  
    // 使用 axios 发送 POST 请求，确保使用正确的密码字段名  
    const response = await axios.post('/login', { username, adminpassword: adminpassword }); // 注意这里  
    const { token } = response.data; // 假设您的后端返回了 token  
    // 存储令牌，例如在 localStorage 中  
    localStorage.setItem('token', token);  
    this.$router.push('/userinfo');  
  } catch (error) {  
    if (error.response) {  
      // 如果服务器返回了状态码和响应体，你可以在这里处理  
      console.error('登录失败', error.response.data);  
    } else if (error.request) {  
      // 如果请求被发送但服务器没有响应  
      console.error('请求已发送但未收到响应', error.request);  
    } else {  
      // 发生了一些错误，如设置请求时  
      console.error('发生错误', error.message);  
    }  
  }  
}
      }
    }
  </script>